<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/projectAdmin/projectList'">
      <div class="vs-search-box" style="padding: 24px 22px 0 0px">
        <el-form ref="form" :inline="true" :model="paging" label-width="90px">
          <el-form-item label="门店:">
            <el-select clearable v-model="paging.store_id" placeholder="请选择">
              <el-option
                v-for="(ele, index) in storeList"
                :key="index"
                :label="ele.title"
                :value="ele.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称：">
            <el-input v-model="paging.name"></el-input>
          </el-form-item>
          <el-form-item label="项目分类：">
            <el-select v-model="paging.cate_id" placeholder="请选择">
              <el-option
                v-for="item in cateList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="right">
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="select()">查询</el-button>
        </div>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
            <el-tag type="warning">注:下架是该项目不会在展示了    </el-tag>
            <el-tag style="margin-left: 10px;" type="warning">注:下线是该项目不会出现在小程序首页展示    </el-tag>
          <el-button
            style="margin-left: auto"
            type="primary"
            @click="setDate(1)"
            >新增</el-button
          >
        </div>
      
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#f5f6f8' }"
          v-loading="loading"
          :data="tableData"
          
        >
          <el-table-column width="60px" type="selection"></el-table-column>
          <el-table-column
            min-width="70px"
            label="项目ID"
            prop="id"
          ></el-table-column>
          <el-table-column prop="name" label="项目名称" min-width="100px">
          </el-table-column>
          <el-table-column label="商城项目标记" min-width="100px">
            <template slot-scope="scope">
              <span v-if="scope.row.line_status == 1">
                <i class="el-icon-star-on"></i>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="duration" label="项目时长（分）" min-width="100px">
          </el-table-column>
          <el-table-column prop="price" label="标准价格（元）" min-width="100px">
          </el-table-column>
          <!-- <el-table-column prop="vip_price" label="会员价格（元）" min-width="100px">
          </el-table-column> -->
          <el-table-column prop="use_num" label="使用次数" min-width="100px">
          </el-table-column>
          <el-table-column prop="sold_num" label="销量" min-width="100px">
          </el-table-column>
          <el-table-column prop="tips" label="特别提醒" min-width="100px">
          </el-table-column>
          <el-table-column prop="tags" label="项目功效便签" min-width="100px">
            <template slot-scope="scope">
              <div v-if="scope.row.tags">
                <span v-for="(item,i) in scope.row.tags">{{item.tags ? item.tags.name : '-'}} <span v-if="i != (scope.row.tags.length-1)">、</span></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="limbs" label="针对部位" min-width="100px">
          </el-table-column>
          <el-table-column label="项目图片" min-width="100px">
            <template slot-scope="scope" v-if="scope.row.pic">
              <el-image
                style="width: 100px"
                :src="scope.row.pic"
                alt=""
                :preview-src-list="[scope.row.pic]"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="项目状态" min-width="90px">
            <template slot-scope="scope">
              <span>{{ scope.row.status | typeName }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="排序" width="140px">
            <template slot-scope="scope">
              <el-input-number size="mini"
                v-model="scope.row.sort"
                @change="handleChange(scope.row, $event)"
              ></el-input-number>
            </template>
          </el-table-column> -->
          <el-table-column fixed="right" width="210" label="操作">
            <template slot-scope="scope">
              <span class="tab-table-text" @click="setDate(2, scope.row)"
                >编辑</span
              >
              <!-- <span
                class="tab-table-text gray"
                v-if="scope.row.status == 0"
                @click="setDate(4, scope.row)"
                >上架</span
              >
              <span
                class="tab-table-text"
                v-if="scope.row.status == 1"
                @click="setDate(5, scope.row)"
                >下架</span
              > -->
              <span
                class="tab-table-text"
                :class="scope.row.line_status == 0 ? 'gray' : ''"
                v-if="scope.row.status == 1"
                @click="setDate(6, scope.row)"
              >
                {{ scope.row.line_status == 0 ? "上线" : "下线" }}
              </span>
              <span class="tab-table-text red" @click="setDate(3, scope.row)"
                >删除</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
      },
      loading: false,
      paging: {
        store_id: "",
        name: "", //姓名
        cate_id: "",
        page: 1,
        total: 0,
        limit: 10,
      },
      tableData: [],
      cateList: [],
      storeList:[],
    };
  },
  filters: {
    typeName(val) {
      switch (val) {
        case 0:
          val = "未上架";
          break;
        case 1:
          val = "已上架";
          break;
      }
      return val;
    },
  },
  created() {
    // 获取菜单参数 customize_id
    let menu = JSON.parse(localStorage.getItem('menu'))
    this.uniqueStair = localStorage.getItem('uniqueStair') // 子级
    this.uniqueSublevel = localStorage.getItem('uniqueSublevel') // 父级
    // console.log(767, this.uniqueStair, this.uniqueSublevel)
    menu.forEach(item => {
      if(item.title === this.uniqueSublevel) {
        localStorage.setItem('customize_id', item.customize_id || '')
      }
    });
    // localStorage.removeItem("customize_id"); 

    this.getCate();
    this.GetList();
    this.getAllStoreList()
  },
  methods: {
    // 获取全部门店
    async getAllStoreList() {
      let { code, data } = await this.$Http.homegetStore({customize_id: localStorage.getItem('customize_id') || ''});
      if (code) {
        this.storeList = data;
      }
    },
    // 获取分类列表
    async getCate() {
      let { code, data } = await this.$Http.getCate();
      if (code) {
        this.cateList = data;
      }
    },
    // 搜索
    select() {
      this.GetList();
    },
    // 重置
    reset() {
      this.paging = this.$options.data().paging;
      this.GetList();
    },
    setDate(type, row) {
      if (type == 1) {
        this.$router.push(
          `/projectAdmin/projectList/editProject?title=新增项目`
        );
      } else if (type == 2) {
        this.$router.push(
          `/projectAdmin/projectList/editProject?title=编辑项目&id=${row.id}`
        );
      } else if (type == 3) {
        this.$msgbox({
          title: "提示",
          message: "确定要删除该项目吗?",
          type: "warning",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              let { code, data } = await this.$Http.setProjectStatus({
                id: row.id,
                status: -1,
              });
              if (code) {
                this.$message.success("删除成功!");
                this.handleCurrentChange(1);
              }
              done();
              instance.confirmButtonLoading = false;
            } else {
              done();
            }
          },
        })
          .then((action) => {})
          .catch(() => {});
      } else if (type == 4) {
        this.$msgbox({
          title: "提示",
          message: "确定要上架该项目吗?",
          type: "warning",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              let { code, data } = await this.$Http.setProjectStatus({
                id: row.id,
                status: 1,
              });
              if (code) {
                this.$message.success("上架成功!");
                this.handleCurrentChange(1);
              }
              done();
              instance.confirmButtonLoading = false;
            } else {
              done();
            }
          },
        })
          .then((action) => {})
          .catch(() => {});
      } else if (type == 5) {
        this.$msgbox({
          title: "提示",
          message: "确定要下架该项目吗?",
          type: "warning",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              let { code, data } = await this.$Http.setProjectStatus({
                id: row.id,
                status: 0,
              });
              if (code) {
                this.$message.success("下架成功!");
                this.handleCurrentChange(1);
              }
              done();
              instance.confirmButtonLoading = false;
            } else {
              done();
            }
          },
        })
          .then((action) => {})
          .catch(() => {});
      } else if (type == 6) {
        let sta = row.line_status == 0 ? 1 : 0;
        this.$msgbox({
          title: "提示",
          message: `确定要${sta == 1 ? "上线" : "下线"}该项目吗?`,
          type: "warning",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: async (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = "执行中...";
              let { code, data } = await this.$Http.setProjectLineStatus({
                id: row.id,
                line_status: sta,
              });
              if (code) {
                this.$message.success(`${sta == 1 ? "上线" : "下线"}成功`);
                this.handleCurrentChange(1);
              }
              done();
              instance.confirmButtonLoading = false;
            } else {
              done();
            }
          },
        })
          .then((action) => {})
          .catch(() => {});
      }
    },
    async GetList() {
      this.loading = true;
      this.paging.customize_id = localStorage.getItem('customize_id') || '' // 菜单customize_id
      let { code, data } = await this.$Http.getProject(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data.data;
        console.log(55, this.tableData)
        this.paging.total = data.total;
      }
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.GetList();
    },
    async handleChange(ele, value) {
      this.loading = true;
      let { code, data } = await this.$Http.setProjectSort({
        id: ele.id,
        sort: value,
      });
      this.loading = false;
      if (code) {
        this.$message.success("设置成功!");
        this.GetList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
.vs-search-box {
  display: flex;
  padding-right: 22px;
  padding-left: 18px !important;
  justify-content: space-between;
  .right {
    width: 150px;
  }
}
.red {
  color: #f00 !important;
}
.gray {
  color: #999 !important;
}
.el-icon-star-on {
  font-size: 24px;
  color: orange;
}
</style>